<!-- * 文件名：邀请用户
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2025-3-9  -->
<template>
	<view class="inviteUsers">
		<view class="contentTop">
			<view class="contentTopTitle">用电减免计划</view>
			<image :src="getUrl('/homeTop.png')" mode=""></image>
		</view>
		<view class="contentBox">
			<view class="contentBoxImage">
				<image :src="avatar" mode="heightFix"></image>
			</view>
			<view class="contentBoxTop">【{{userName}}】邀请你加入</view>
			<view class="contentBoxBottom">
				<image :src="QRCode" mode=""></image>
				<!-- <view class="contentBoxBottomText">长按识别</view> -->
			</view>
		</view>
		<view class="btns">
			<view class="btnLeft" @click="handleSaveImage">保存图片</view>
			<button class="btnRight" open-type="share">马上邀请</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onShow, onLoad, onShareAppMessage } from "@dcloudio/uni-app"
	import topbar from '@/components/topbar/index.vue'
	import { getUrl } from '@/utils/imagePlugin'
	import Api from '@/api/modules/home.ts'
	
	onShareAppMessage((res) => {
		if (res.from === 'button') {// 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			imageUrl: getUrl('/partner_recruit.png'),  // QRCode.value
			title: userName.value + '邀请你加入用电减免计划',
			path: `/pages/wxLogin/wxLogin?code=${code.value}`
		}
	})
	
	let QRCode = ref<string>('')
	let code = ref<string>('')
	let userName = ref<string>('')
	let avatar = ref<string>('')
	const getInvitationCodeByUser = () => {
		Api.getInvitationCodeByUser().then((res: any) => {
			QRCode.value = res.data.url
			code.value = res.data.invitationCode
		})
	}
	
	const getInfo = () => {
		Api.getInfo().then((res: any) => {
			userName.value = res.user.nickName
			avatar.value = res.user.avatar
		})
	}

	const handleSaveImage = () => {
		uni.downloadFile({
			url: QRCode.value, // 图片地址
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							uni.showToast({
								title: '保存成功',
								icon: 'success',
								duration: 2000
							});
						},
						fail: function (error) {
							console.error('保存失败', error);
							uni.showToast({
								title: '保存失败',
								icon: 'none',
								duration: 2000
							});
						}
					})
				} else {
					console.log('下载失败');
				}
			}
		})
	}

	onLoad(()=>{
		getInfo()
		getInvitationCodeByUser()
	})
</script>

<style lang="scss" scoped>
	.inviteUsers{
		background-color: #5EB847;
		text-align: center;
		height: 100vh;
		
		.contentTopTitle{
			color: #ffffff;
			font-size: 42rpx;
			font-weight: 600;
			padding: 20rpx 0 0;
			text-align: center;
		}
		
		image{
			width: 694rpx;
			height: 384rpx;
		}
		
		.contentBox{
			background: #ffffff;
			border-radius: 24rpx;
			margin: 32rpx;
			height: 600rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			
			.contentBoxImage{
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				border: 1rpx solid #A1A1A1;
				overflow: hidden;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #ffffff;
				
				image{
					height: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			
			.contentBoxTop{
				padding-top: 60rpx;
				text-align: center;
				font-size: 32rpx;
			}
			
			.contentBoxBottom{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				
				image{
					width: 500rpx;
					height: 500rpx;
				}
				
				.contentBoxBottomText{
					margin-top: 10rpx;
				}
			}
		}
		
		.btns{
			display: flex;
			justify-content: space-between;
			margin: 0 32rpx;
			
			.btnLeft{
				background-color: #ffffff;
				border: 2rpx solid #ffffff;
				color: #5EB847;
				width: 48%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 80rpx;
				font-weight: 600;
			}
			
			.btnRight{
				background-color: #5EB847;
				border: 2rpx solid #ffffff;
				color: #ffffff;
				width: 48%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 80rpx;
				font-weight: 600;
			}
		}
	}
</style>